<template>
  <div>
    <el-collapse id="collapse" v-model="activeNames" @change="handleChange">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="80px"
      >
        <el-collapse-item title name="1">
          <el-form-item
            v-if="ditcData.district != undefined"
            label="片区"
            prop="district"
          >
            <el-select
              v-model="queryParams.district"
              placeholder="请选择片区"
              clearable
              size="medium"
              class="selectMore"
            >
              <el-option
                v-for="item in ditcData.district"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="dict.clinicOptions != undefined"
            label="门诊"
            prop="reservationClinic"
          >
            <el-cascader
              v-model="queryParams.reservationClinic"
              :show-all-levels="false"
              clearable
              placeholder="请选择门诊"
              expand-trigger="hover"
              :options="dict.clinicOptions"
              @change="DeptId"
            />
          </el-form-item>
          <!-- <el-form-item
            v-if="dict.marketPostList != undefined"
            label="部门(人员)"
            label-width="80px"
            prop="departmentStaff"
          >
            <el-select
              v-model="queryParams.departmentStaff"
              placeholder="请选择部门人员"
              clearable
              size="medium"
              class="selectMore"
            >
              <el-option
                v-for="index in dict.marketPostList"
                :key="index.postId"
                :label="index.postName"
                :value="index.postName"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item
            v-if="dict.projectOptions != undefined"
            label="访问病种"
            prop="visitDisease"
          >
            <el-cascader
              v-model="paramsData.visitDiseaseArray"
              separator="-"
              placeholder="请选择访问病种"
              :options="dict.projectOptions"
              @change="handleVisitDiseaseChange"
            />
            <!-- <el-select
              v-model="queryParams.visitDisease"
              class="selectMore"
              placeholder="请选择访问病种"
              clearable
              size="medium"
            >
              <el-option
                v-for="items in dict.projectOptions"
                :key="items.dictValue"
                :label="items.dictLabel"
                :value="items.dictValue"
              />
            </el-select> -->
          </el-form-item>
          <el-form-item
            v-if="dict.callBackStateOptions != undefined"
            label="回访状态"
            prop="callBackState"
          >
            <el-select
              v-model="queryParams.callBackState"
              size="medium"
              clearable
              placeholder="请选择回访状态"
              class="selectMore"
            >
              <el-option
                v-for="indexs in dict.callBackStateOptions"
                :key="indexs.dictValue"
                :label="indexs.dictLabel"
                :value="indexs.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="dict.reachStatusOptions != undefined"
            label="到店状态"
            prop="reachState"
          >
            <el-select
              v-model="queryParams.reachState"
              size="medium"
              clearable
              placeholder="请选择到店状态"
              class="selectMore"
            >
              <el-option
                v-for="dicts in dict.reachStatusOptions"
                :key="dicts.dictValue"
                :label="dicts.dictLabel"
                :value="dicts.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="dict.marketChannelList != undefined"
            label="多级渠道"
            prop="channel"
          >
            <el-cascader
              v-model="paramsData.channel"
              clearable
              placeholder="请选择渠道"
              :options="dict.marketChannelList"
              @change="handleChannelChange"
            />
          </el-form-item>
          <el-form-item
            v-if="dict.moreMedium != undefined"
            label="多级媒介"
            prop="medium"
          >
            <el-cascader
              v-model="queryParams.medium"
              clearable
              placeholder="请选择媒介"
              :options="dict.marketChannelList"
              @change="handleMediumChange"
            />
          </el-form-item>
          <el-form-item
            v-if="dict.filingPerson != undefined"
            label="建档人"
            prop="filingPerson"
          >
            <div class="filingBox">
              <el-input v-model="queryParams.filingPerson" readonly />
              <el-button type="text" @click="handleDialogue('建档人')"
                >选择</el-button
              >
            </div>
          </el-form-item>
          <el-form-item
            v-if="dict.visitPerson != undefined"
            label="跟进人"
            prop="followPerson"
          >
            <div class="filingBox">
              <el-input v-model="queryParams.followPerson" readonly />
              <el-button type="text" @click="handleDialogue('跟进人')"
                >选择</el-button
              >
            </div>
          </el-form-item>
          <el-form-item
            v-if="dict.affiliationPerson != undefined"
            label="归属人"
            prop="affiliationPerson"
          >
            <div class="filingBox">
              <el-input v-model="queryParams.affiliationPerson" readonly />
              <el-button type="text" @click="handleDialogue('归属人')"
                >选择</el-button
              >
            </div>
          </el-form-item>
          <el-form-item
            v-if="dict.visitTime != undefined"
            label="回访时间"
            prop="visitTime"
          >
            <el-date-picker
              v-model="queryParams.visitTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="dict.filingTime != undefined"
            label="建档时间"
            prop="filingTime"
          >
            <el-date-picker
              v-model="queryParams.filingTime"
              type="datetimerange"
              :editable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="selectDate"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-collapse-item>
      </el-form>
    </el-collapse>
    <select-model
      :show="show"
      :title="title"
      @close="close"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import selectModel from './selectModel'
import Vue from 'vue'
export default {
  components: {
    selectModel,
  },
  props: {
    dict: {
      type: Object,
      required: true,
    },
    params: {
      type: Object,
      default() {
        return {}
      },
    },
    // active: {
    //   type: String,
    //   required: true,
    // },
  },
  data() {
    return {
      ditcData: {
        district: [
          {
            dictLabel: '武汉',
            dictValue: 0,
          },
          {
            dictLabel: '黄石',
            dictValue: 1,
          },
          {
            dictLabel: '恩施县级',
            dictValue: 2,
          },
          {
            dictLabel: '恩施市级',
            dictValue: 3,
          },
          {
            dictLabel: '孝感',
            dictValue: 4,
          },
          {
            dictLabel: '宜昌',
            dictValue: 5,
          },
        ],
      },
      activeNames: [],
      // queryParams: this.params,
      queryParams: {
        district: undefined,
        channel: undefined,
        medium: undefined,
        reservationClinic: undefined,
        visitDisease: undefined,
        departmentStaff: undefined,
        callBackState: undefined,
        reachState: undefined,
        filingPerson: undefined,
        followPerson: undefined,
        affiliationPerson: undefined,
        visitTime: undefined,
        filingTime: undefined,
        channelFirst: undefined,
        channelSecond: undefined,
        channelThird: undefined,
      },
      paramsData: {
        district: undefined,
        channel: undefined,
        medium: undefined,
        reservationClinic: undefined,
        visitDisease: undefined,
        departmentStaff: undefined,
        callBackState: undefined,
        reachState: undefined,
        filingPerson: undefined,
        followPerson: undefined,
        affiliationPerson: undefined,
        visitTime: undefined,
        filingTime: undefined,
        visitDiseaseArray: undefined,
        channelFirst: undefined,
        channelSecond: undefined,
        channelThird: undefined,
      },
      show: false,
      title: '',
    }
  },
  watch: {
    params: {
      handler(newVal) {
        this.queryParams = newVal
      },
      immediate: true,
    },
    'params.visitDisease': {
      handler(val) {
        this.watchVisitDisease(val)
      },
      deep: true,
    },
    'params.channel': {
      handler(val) {
        this.watchChannel(val)
      },
      deep: true,
    },
  },
  created() {
    this.queryParams = this.params
    if (this.queryParams.visitDisease) {
      this.paramsData.visitDiseaseArray = this.queryParams.visitDisease.split(
        '-'
      )
    }
    if (this.queryParams.channel) {
      this.paramsData.channel = this.queryParams.channel.split(',')
    }
    for (const key in this.paramsData) {
      if (this.params.hasOwnProperty(key)) {
        if (this.params[key] == null || this.params[key] == undefined) {
          return
        } else {
          if (this.$route.path == '/market/reservationNonArrival') {
            if (key == 'reachState') {
              return
            }
          }
          this.$emit('show', true)
          this.activeNames = ['1']
        }
      }
    }
  },
  methods: {
    watchChannel(v) {
      if (v) {
        this.paramsData.channel = v.split(',')
      } else {
        this.paramsData.channel = v
      }
    },
    watchVisitDisease(v) {
      if (v) {
        this.paramsData.visitDiseaseArray = v.split('-')
      } else {
        this.paramsData.visitDiseaseArray = v
      }
    },
    selectDate(e) {
      if (e == null) {
        this.queryParams.startFilingTime = undefined
        this.queryParams.endFilingTime = undefined
      } else {
        this.queryParams.startFilingTime = this.parseTime(
          e[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endFilingTime = this.parseTime(
          e[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      }
    },
    handleVisitDiseaseChange(e) {
      if (e) {
        this.queryParams.visitDisease = e.join('-')
      } else {
        return
      }
    },
    handleChannelChange(e) {
      if (e) {
        ;[
          this.queryParams.channelFirst,
          this.queryParams.channelSecond,
          this.queryParams.channelThird,
        ] = e
        this.queryParams.channel = e.toString()
      } else {
        return
      }
    },
    handleMediumChange(e) {
      if (e) {
        ;[
          this.queryParams.mediumFirst,
          this.queryParams.mediumSecond,
          this.queryParams.mediumThird,
        ] = e
      } else {
        return
      }
    },
    //选择门诊
    DeptId(o) {
      if (o != undefined) {
        this.queryParams.reservationClinic = o[1]
      } else {
        return
      }
    },
    confirm(e) {
      if (e.title == '建档人') {
        this.queryParams.filingPerson = e.userName
      } else if (e.title == '跟进人') {
        this.queryParams.followPerson = e.userName
      } else {
        this.queryParams.affiliationPerson = e.userName
      }
      this.show = false
    },
    close(e) {
      this.show = e
    },
    handleDialogue(msg) {
      this.title = msg
      this.show = true
    },
    handleChange(val) {
      if (val.length !== 0) {
        this.$emit('show', true)
        this.activeNames = val
      } else {
        this.activeNames = val
        this.$emit('show', false)
      }
    },
    handleQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.clearData()
          this.deleteData(this.queryParams)
          this.$emit('query', this.queryParams)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteData(obj) {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] == undefined || obj[key] == '') {
            Vue.delete(obj, key)
          }
        }
      }
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.$emit('reset', true)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    clearData() {
      // if (this.queryParams.visitDiseaseArray) {
      //   this.queryParams.visitDiseaseArray = this.queryParams.visitDiseaseArray.toString()
      // }
      // if (this.queryParams.visitDiseaseArray == undefined) {
      //   this.queryParams.visitDisease = undefined
      // }
      // if (this.queryParams.channel) {
      //   this.queryParams.channel = this.queryParams.channel.toString()
      // }
      // if (this.queryParams.channel == undefined) {
      //   this.queryParams.channelFirst = undefined
      //   this.queryParams.channelSecond = undefined
      //   this.queryParams.channelThird = undefined
      // }
      if (this.queryParams.medium) {
        this.queryParams.medium = this.queryParams.medium.toString()
      }
      if (this.queryParams.medium == undefined) {
        this.queryParams.mediumFirst = undefined
        this.queryParams.mediumSecond = undefined
        this.queryParams.mediumThird = undefined
      }
      if (this.queryParams.filingTime) {
        if (this.queryParams.filingTime[0] == undefined) {
          this.queryParams.filingTime.length = 0
          this.queryParams.startFilingTime = undefined
          this.queryParams.endFilingTime = undefined
        } else {
          this.queryParams.filingTime = this.queryParams.filingTime.toString()
        }
      }
      if (this.queryParams.filingTime == undefined) {
        this.queryParams.startFilingTime = undefined
        this.queryParams.endFilingTime = undefined
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-collapse >>> .el-collapse-item__content {
  padding-bottom: 0px;
}
.filingBox {
  display: flex;
}
.filingBox:nth-child(1) div {
  margin-right: 10px;
}
.selectMore {
  line-height: 30px;
}
</style>
